import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
//自动轮播的按需加载
import SwiperCore, { Autoplay, Pagination } from "swiper";
import "swiper/swiper.less";
import "swiper/components/pagination/pagination.less";
SwiperCore.use([Autoplay, Pagination]);
import "./index.less";

function index({ swiperList }) {
    const swiperItem = swiperList.map((item, index) => {
        return (
            <SwiperSlide key={index}>
                <img src={item.pictureURL} alt="" />
            </SwiperSlide>
        );
    });

    return (
        <div className="shop-swiper-container">
            <Swiper
                onSlideChange={(swiper) => {
                    // console.log("slide change");
                    // console.log(swiper.realIndex);
                }}
                onSwiper={(swiper) => console.log(swiper)}
                autoplay={{ delay: 3000 }} // 自动轮播
                pagination={{ clickable: true }} //分页
                loop={true} //首尾衔接的轮播
            >
                {swiperItem}
            </Swiper>
        </div>
    );
}

export default index;
